<template>
  <div class="all-mv">
    <scroll ref="scroll"
            class="scroll"
            :pull-up-load="true"
            @pullingUp='pullingUp()'>
      <div class="title">全部MV</div>
      <div class="content">
        <mv-bar />
        <mv-item :mv-list='mvList' />
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll";

import MvBar from "./childComps/MvBar";
import MvItem from "./childComps/MVItem";
import { _AllMv, MV } from "network/mv";
export default {
  name: 'AllMV',
  components: {
    Scroll,
    MvBar,
    MvItem
  },
  data () {
    return {
      // 一次请求的数量
      limit: 15,
      offset: 1,
      mvList: [],
      // mv地区
      area: null,
      // mv类型
      type: null,
      // 排序
      order: null
    }
  },
  created () {
    this.allMv()
  },
  methods: {
    pullingUp () {
      this.loadMv();
    },
    // 加载更多地区，类型，排序已经确定的mv
    loadMv () {
      const mvList = [];
      _AllMv(this.area, this.type, this.order, this.limit * this.offset).then(
        res => {
          for (const i of res.data.data) {
            const mv = new MV(i.id, i.cover, i.name, i.artistName, i.playCount);
            mvList.push(mv);
          }
          this.mvList = mvList;
          this.offset++;
          this.$refs.scroll.finishPullUp();
        })
    },
    // 获取area:全部,type:全部,order:上升最快的所有MV
    allMv (
      area = "全部",
      type = "全部",
      order = "上升最快",
      limit = this.limit * this.offset
    ) {
      this.mvList = [];
      this.area = area;
      this.type = type;
      this.order = order;
      _AllMv(area, type, order, limit).then(res => {
        for (const i of res.data.data) {
          const mv = new MV(i.id, i.cover, i.name, i.artistName, i.playCount);
          this.mvList.push(mv);
        }
      })
    }
  }
}
</script>

<style scoped>
.all-mv {
  width: 100%;
  overflow: hidden;
  height: 100%
}
.scroll {
  height: 100%;
}
.title {
  padding: 10px;
  font-size: 18px;
  color: #00aa85;
  border-bottom: 1px solid #000;
}
.content {
  padding: 0 10px;
}
</style>
